<template>
    <el-card class="box-card">
        <el-row style="margin-bottom:10px">
            <el-col :span="24">
                <div class="card-header">
                    <span>用户访问</span>
                    <el-button class="button" text>详情</el-button>
                </div>
            </el-col>
        </el-row>
        <div class="demo-progress">
            <el-row>
                <el-col :span="24">
                    <el-descriptions title="当日信息">
                        <el-descriptions-item label="登录人数">
                            <el-button link type="success">3000</el-button>
                        </el-descriptions-item>
                        <el-descriptions-item label="注册人数">
                            <el-button link type="success">50</el-button>
                        </el-descriptions-item>
                        <el-descriptions-item label="购物人数">
                            <el-button link type="success">150</el-button>
                        </el-descriptions-item>
                        <el-descriptions-item label="交易订单数">
                            <el-button link type="success">137</el-button>
                        </el-descriptions-item>
                        <el-descriptions-item label="消费金额">
                            <el-button link type="success">4571</el-button>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-col>
                <EchartTool :options="option" height="300px"/>
                <el-col :span="24">
                </el-col>
            </el-row>
        </div>


    </el-card>
</template>

<script lang="ts" setup>
import EchartTool from '../tools/EchartTool.vue'


let option = {
    tooltip:{trigger:'axis'},
    title:{text:'一周内数据统计'},
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [1501, 2305, 2244, 2182, 1350, 1470, 3000],
            type: 'line',
            name: '登陆人数'
        },
        {
            data: [321, 810, 447, 187, 295, 407, 350],
            type: 'line',
            name: '注册人数'
        },
        {
            data: [2845.8, 3157, 2410.1, 1954.88, 3014.5, 2565.9, 2419.6],
            type: 'line',
            name: '成交额'
        },
    ]
};


</script>

<style scoped>
.percentage-value {
    display: block;
    margin-top: 10px;
    font-size: 28px;
}

.percentage-label {
    display: block;
    margin-top: 10px;
    font-size: 12px;
}

.demo-progress .el-progress--line {
    margin-bottom: 15px;
    width: 350px;
}

.demo-progress .el-progress--circle {
    margin-right: 15px;
}

/* 
.dashboard-main .el-col {
    padding: 10px;
} */
</style>